<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:bm="livcos.org/ns/example/bm"
  xmlns:f="livcos.org/ns/xslt/function"
  exclude-result-prefixes="bm f">
    
  <xsl:import href="/livcos.org/web/document.xsl" />
  
  <xsl:decimal-format name="money" grouping-separator="'"/>
  
  <xsl:template match="bm:*">
  </xsl:template>
  
  <xsl:template match="/">
    <xsl:apply-templates select="document(concat($projRootId, '/data/', $relativeName, '.view'))/*" />
  </xsl:template>
  
  <xsl:template match="/bm:business">
    <html id="{$viewObjId}">
      <head>
        <title><xsl:value-of select="bm:title" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="served" content="{current-dateTime()}"/>
        <link href="{$toRootPath}/livcos.org/web/css/styles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="{$toRootPath}/livcos.org/web/script/scripts.js"><!-- --></script>
        <style>
          body {
            background-color: darkgray;
          }
          .paper {
            background-color:#FAFAFF;
            margin: 20px 40px;
            padding: 40px 80px;
            border: 
          }
          table {
            border: none;
            margin-left: 20px;
          }
          tbody td, tbody th {
            border-top: 1px solid gray; 
          }
          tbody td, thead th {
            border-left: 1px solid gray; 
          }
          td, th {
            padding: 2px 12px; 
          }
          th {
            background-color: lightgray;
            font-weight: normal;
          }
          p.title {
            font-size: 300%;
          }
          h1 {
            font-size: 160%;
          }
        </style>
      </head>
      <body>
        <div id="{f:object-id(.)}" class="contentPanel">
          <div class="paper">
            <img src="image/apple.png" align="right"/>
            <p class="title" style="font-size: 240%; text-align: left; margin: 40px 0px;">Business Plan</p>
            <p class="title"><xsl:value-of select="bm:title" /></p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <p>&#160;</p>
            <xsl:apply-templates select="bm:line"/>
          </div>
        </div>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="bm:line">
    <p>&#160;</p>
    <div style="margin: 0px -80px; background-image: url('image/separator.png'); height: 58px;">
      &#160;
    </div>
    <p>&#160;</p>
    <xsl:apply-templates select="bm:model"/>
    <p>&#160;</p>
  	<div style="margin: 0px -80px; background-image: url('image/separator.png'); height: 58px;">
      &#160;
    </div>
    <p>&#160;</p>
    <xsl:apply-templates select="bm:roles"/>
    <p>&#160;</p>
    <p>&#160;</p>
  	<div style="margin: 0px -80px; background-image: url('image/separator.png'); height: 58px;">
      &#160;
    </div>
    <p>&#160;</p>
  </xsl:template>
  
  <xsl:template match="bm:model">
    <div id="{@id}">
      <h1><xsl:value-of select="bm:title"/></h1>
      <!--
        Seems to work with both, IE and FF, even though not standard. In IE the
        diagram flashes until clicked to "activate".
      -->
      <embed src="./model.svg" type="image/svg+xml" width="780" height="140"/>
      <!--
        Should work with both (http://wiki.svg.org/SVG_and_HTML), but IE 7 seems to
        problems and shows only an empty box (flashing until clicked to "activate").
        
        <object data="./model.svg" type="image/svg+xml" width="780" height="140">
          <embed src="./model.svg" type="image/svg+xml" width="780" height="140"/>
        </object>
      -->
      <!--
        Works for both, IE and FF, but fails after an edit, because the DOM merge
        does not work with iframes yet.
        
        <iframe src="./model.svg" width="780" height="140" frameborder="0"/>
      -->
      <xsl:apply-templates select="*"/>
    </div>
  </xsl:template>
  
  <xsl:template match="bm:player">
    <div id="{@id}">
      <h2><xsl:value-of select="bm:title" /></h2>
      <p><xsl:value-of select="bm:description" /></p>
      <xsl:if test="bm:relation">
        <table cellspacing="0">
          <thead>
            <tr>
              <td>&#160;</td>
              <th>offer</th>
              <th>payment</th>
              <th>need</th>
            </tr>
          </thead>
          <tbody>
            <xsl:apply-templates select="bm:relation"/>
          </tbody>
        </table>
      </xsl:if>
    </div>
  </xsl:template>
  
  <xsl:template match="bm:player[@ref]">
  </xsl:template>
  
  <xsl:template match="bm:relation">
    <xsl:variable name="supplier" select="if (@ref = 'player_1') then /*/bm:title
      else ../../bm:player[@id = current()/@ref]/bm:title"/>
    <tr id="{@id}">
      <th>
        <xsl:value-of select="$supplier" />
      </th>
      <td>
        <xsl:apply-templates select="bm:input"/>
      </td>
      <td>
        <xsl:apply-templates select="bm:payment"/>
      </td>
      <td>
        <xsl:apply-templates select="bm:need"/>
      </td>
    </tr>
  </xsl:template>
  
  <xsl:template match="bm:input | bm:need">
    <xsl:if test="position() > 1">, </xsl:if>
    <span id="{@id}"><xsl:value-of select="." /></span>
  </xsl:template>
  
  <xsl:template match="bm:payment">
    <xsl:if test="position() > 1">, </xsl:if>
    <span id="{@id}">
      <xsl:text>$</xsl:text>
      <xsl:value-of select="@amount" />
      <xsl:text>/</xsl:text>
      <xsl:value-of select="if (normalize-space(@unit) != '') then @unit else 'unit'"/>
    </span>
  </xsl:template>
  
  <xsl:template match="bm:roles">
    <h1>Resources</h1>
    <xsl:apply-templates select="bm:role"/>
  </xsl:template>
  
  <xsl:template match="bm:role">
    <div id="{@id}">
      <h2><xsl:value-of select="bm:title" /></h2>
      <p><xsl:value-of select="bm:description" /></p>
      <p>Average salary of $<xsl:value-of select="format-number(bm:salary/@amount, '0''000', 'money')" /> pa.</p>
    </div>
  </xsl:template>
  
</xsl:stylesheet>
